﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Grid Layout</title>

    <link rel="stylesheet" href="css/grid960.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
     
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
        dojo.require('esri.arcgis.Portal');//注册门户类
        dojo.require("esri.IdentityManager");//身份管理器
        dojo.require("dojox.lang.aspect");//外貌

        var displayOptions = {//显示选项
            templateUrl: 'http://www.arcgis.com/apps/OnePane/basicviewer/profile.html',
            themeName: 'gray',//样式
            numItemsPerPage: 6,//每页的项目
            group: {//组对象
                "owner": "Kelly",
                "title": "Running Routes"
            },
            portalUrl: 'http://www.arcgis.com'
        };
        var portal;
        var group;
        var nextQueryParams;
        var queryParams;

        function init() {
            //创建门户对象
            portal = new esri.arcgis.Portal(displayOptions.portalUrl);
            dojo.connect(portal, 'onLoad', loadPortal);//绑定加载事件
            //对门户执行一个查询返回一个延迟,当解决returnsPortalQueryResult包含一个数组ofPortalItem
           // 对象输入查询相匹配的结果。

            //或文本数据可以通过项目数据资源。查看ArcGIS门户API其他文档项目的更多细节。
            //参数一门户，参数二为方法，
            //参数三 定义为一个对象,或一个函数,它返回这样的对象,或一个数组之前的项目
           // 建议对象可以定义成员函数:,,afterReturning（在这之后返回） afterThrowing(在这之后抛出)
            dojox.lang.aspect.advise(portal, "queryItems", {               
                afterReturning: function (cc) {//cc为延迟（Deferred）对象
                    cc.then(function (result) {//then添加新的回调延迟函数,result为PortalQueryResult对象，详细信息查询的结果。
                        nextQueryParams = result.nextQueryParams;//下一组结果的查询参数。
                        queryParams = result.queryParams;//第一组结果的查询参数。
                    });
                }
            });
        }

        function loadPortal() {
            var params = {
                q: 'title: ' + displayOptions.group.title + ' AND owner:' + displayOptions.group.owner//查询参数
            };
            //根据参数，查询门户资源内容
            portal.queryGroups(params).then(function (groups) {//根据参数，延缓推出查询内容
                //获得群组信息，包含缩略图的url groups.results.返回结果
                //设置组的信息
                if (groups.results.length > 0) {
                    //获取群组下的一个组对象
                    group = groups.results[0];//第一个对象
                    if (group.thumbnailUrl) {//组织的缩略图的url(完整路径)。
                        dojo.create('img', {
                            src: group.thumbnailUrl,//组织的缩略图的url(完整路径)。
                            width: 64,
                            height: 64,
                            alt: group.title//标题
                        }, dojo.byId('groupThumbnail'));//绑定缩略图标签
                    }

                    dojo.byId('groupTitle').innerHTML =group.title;//组标题
                    dojo.byId('sidebar').innerHTML = group.snippet;//组片段描述

                    //检索从组织和显示web地图和应用程序
                    var params = {
                        q: ' type: Web Map',
                        num: displayOptions.numItemsPerPage//页码
                    };
                    //查询组内的资源
                    group.queryItems(params).then(updateGrid);//执行更新方法
                }
            });
        }
        //查询组内项目资源展现出来
        function updateGrid(queryResponse) {
            //更新画廊下一页项目

            var galleryList = dojo.byId('galleryList');
            dojo.empty(galleryList);  //空画廊删除现有的项目

            //导航按钮
            (queryResponse.results.length < 6) ? esri.hide(dojo.byId('next')) : esri.show(dojo.byId('next'));
            (queryResponse.queryParams.start > 1) ? esri.show(dojo.byId('prev')) : esri.hide(dojo.byId('prev'));

            //建立每个项目缩略图将显示缩略图,点击网络地图模板或web应用程序
            var frag = document.createDocumentFragment();
            dojo.forEach(queryResponse.results, function (item) {
                if (item.id) {
                    var url = (item.type === 'Web Map') ?
                      displayOptions.templateUrl + '?webmap=' + item.id + '&theme=' + displayOptions.themeName ://服务路径
                      item.url;

                    var li = dojo.create('li', {}, frag);
                    var a = dojo.create('a', {
                        href: url,
                        target: '_blank',
                        innerHTML: '<div class="tooltip"><p>' + item.snippet + '</p></div><img src="' + item.thumbnailUrl + '"/><div>' + item.title + '</div>'
                    }, li);
                }
            });

            dojo.place(frag, galleryList);
        }

        function getNext() {
            if (nextQueryParams.start > -1) {
                group.queryItems(nextQueryParams).then(updateGrid);
            }
        }

        function getPrevious() {
            if (nextQueryParams.start !== 1) { //we aren't at the beginning keep querying. 
                var params = queryParams;
                params.start = params.start - params.num;
                group.queryItems(params).then(updateGrid);
            }
        }

        dojo.ready(init);
    </script>
  </head>
  
  <body>
    <div id='header'>
      <div class='container_16'>
        <div class='grid_2'>
          <span id='groupThumbnail'></span>
        </div>
        <div class='grid_14'>
          <h1 id='groupTitle'></h1>
        </div>
      </div>
    </div>
    <div id='mainContent'>
      <div class='container_16'>
        <div class="grid_3">
          <div id='sidebar'></div>
        </div>
        <div class="grid_13">
          <a id='prev' style='left:-8px;' class="large leftbutton gray navButton"
          href='javascript:getPrevious();'>&#9668; Prev</a>
          <ul id='galleryList' class='gallery'></ul>
          <a id='next' style='right:20px;' class="large rightbutton gray navButton"
          href='javascript:getNext();'>Next &#9658;</a>
        </div>
      </div>
    </div>
  </body>

</html>
